<template>
  <div class="task-has-handle">
    <!-- 处置详情 -->
    <template v-if="operate == ''">
      <header-bar title="事件详情">
        <template v-slot:backBtn>
          <i @click="handleChangePage" class="iconarrow_back"></i>
        </template>
      </header-bar>
      <div :style="{ height: height + 'px' }">
        <cube-scroll>
          <div class="slide-content">
            <cube-slide
              :data="sliderList"
              :autoPlay="false"
              :speed="500"
              :interval="5000"
              :showDots="true"
            >
              <cube-slide-item
                class="slider-item"
                v-for="(item, index) in sliderList"
                :key="index"
                @click.native="showImgList(sliderList, index)"
              >
                <img class="slider-img" :src="item" />
              </cube-slide-item>
            </cube-slide>
          </div>

          <text-detail :baseInfo="baseInfo"></text-detail>
          <div v-if="handleShow && eventStatus!==0">
            <h4 class="pl10">处理详情</h4>
            <div class="slide-content">
              <cube-slide
                :data="hendleImgList"
                :autoPlay="false"
                :speed="500"
                :interval="5000"
                :showDots="true"
              >
                <cube-slide-item
                  class="slider-item"
                  v-for="(item, index) in hendleImgList"
                  :key="index"
                  @click.native="showImgList(hendleImgList, index)"
                >
                  <img class="slider-img" :src="item" />
                </cube-slide-item>
              </cube-slide>
            </div>
            <text-detail
              style="margin-top: 10px;"
              :baseInfo="eventResult"
            ></text-detail>
            <div class="doc-box" v-if="docList.length">
              <div class="title">处理文书：</div>
              <div class="slide-content">
                <cube-slide
                  :data="docList"
                  :autoPlay="false"
                  :speed="500"
                  :interval="5000"
                  :showDots="true"
                >
                  <cube-slide-item
                    class="slider-item"
                    v-for="(item, index) in docList"
                    :key="index"
                    @click.native="showImgList(docList, index)"
                  >
                    <img class="slider-img" :src="item" />
                  </cube-slide-item>
                </cube-slide>
              </div>
            </div>
            <div class="audio-box" v-if="audioArr.length">
              处理音频：
              <div
                v-for="item in audioArr"
                :key="item.name"
                class="audio-box-item"
              >
                <audio :src="item.url" controls controlsList="nodownload" οncοntextmenu="return false"></audio>
                <div class="audio-info">
                  文件名：{{item.fileName}}
                </div>
                <!-- <div class="download-btn" @click="download(item.url, item.fileName)">下载</div> -->
              </div>
            </div>
          </div>
          <div v-if="feedbackShow">
            <h4 class="pl10">反馈详情</h4>
            <div class="slide-content">
              <cube-slide
                :data="feedbackImgList"
                :autoPlay="false"
                :speed="500"
                :interval="5000"
                :showDots="true"
              >
                <cube-slide-item
                  class="slider-item"
                  v-for="(item, index) in feedbackImgList"
                  :key="index"
                  @click.native="showImgList(feedbackImgList, index)"
                >
                  <img class="slider-img" :src="item" />
                </cube-slide-item>
              </cube-slide>
            </div>
            <text-detail
              style="margin-top: 10px;"
              :baseInfo="feedbackInfo"
            ></text-detail>
          </div>
          <!-- 流转记录 -->
          <h4 class="pl10">流转记录</h4>
          <more-events :list="moreEventList"></more-events>
        </cube-scroll>
        <div class="btn-groups" v-if="eventNode == 'dealCase'">
          <template v-if="feedBackStatus === 1 && eventSource !==5">
            <div @click="handleFeedback" class="btn btn-deal">
              反 馈
            </div>
            <div @click="handleBack" class="btn btn-deal">
              退 回
            </div>
          </template>
          <template v-else>
            <div @click="handleDeal" class="btn" :class="{ 'btn-deal': canBack}">
              处 理
            </div>
            <div @click="handleDismiss" class="btn btn-deal" v-show="canBack" v-if="baseData.externalEventType !== null && moreEventList.length == 1">
              不予受理
            </div>
            <div @click="handleBack" class="btn btn-deal" v-show="canBack" v-else>
              退 回
            </div>
          </template>
          
        </div>
      </div>
    </template>

    <handle-content
      :baseData="baseData"
      @handleChange="handleChangePage"
      v-if="operate == 'deal'"
    ></handle-content>
    <back-event
      :baseData="baseData"
      @handleChange="handleChangePage"
      v-if="operate == 'back'"
    ></back-event>
    <feedback
      :baseData="baseData"
      @handleChange="handleChangePage"
      v-if="operate == 'feedback'"
    ></feedback>
    <dismiss
      :baseData="baseData"
      @handleChange="handleChangePage"
      v-if="operate == 'dismiss'"
    ></dismiss>
  </div>
</template>
<script>
/**
 * 我的任务拥有事件处理的页面
 */
// import { replaceImgUrl } from '@/common/js/utils'
// import { getUserInfo } from '@/common/js/cache'
import {
  findOne,
  findOneResult,
  findFeedBack,
  moreEvents
} from "@/api/eventAPI.js";
export default {
  data() {
    return {
      nowPage: "detail", //当前所在页码 detail:详情页 handle:处理页 feedback:反馈页
      baseData: {},
      height: "",
      canRouteGo: true,
      baseInfo: [
        { name: "事件编号", info: "" },
        { name: "事件时间", info: "" },
        { name: "事件描述", info: "" },
        { name: "事件地址", info: "" },
        { name: "事件来源", info: "" },
        { name: "紧急上报", info: "" },
        { name: "事件备注", info: "" },
        { name: "事件大类", info: "" },
        { name: "事件小类", info: "" },
        { name: "所属区县", info: "" },
        { name: "所属街道", info: "" },
        { name: "所属道路", info: "" },
        { name: "定时巡查", info: "" }
      ],
      eventResult: [
        { name: "处理方式", info: "" },
        { name: "沟通方式", info: "" },
        { name: "处理单位", info: "" },
        { name: "处理人", info: "" },
        { name: "处理时间", info: "" },
        { name: "处理内容", info: "" },
        { name: "处理超时", info: "" },
        { name: "处理截止", info: "" }
      ],
      feedbackInfo: [
        { name: "反馈单位", info: "" },
        { name: "反馈人", info: "" },
        { name: "反馈时间", info: "" },
        { name: "反馈内容", info: "" },
        { name: "反馈超时", info: "" },
        { name: "反馈截止", info: "" }
      ],
      hendleImgList: [],
      feedbackImgList: [],
      sliderList: [],
      handleImg: {
        beforeHnadle: [],
        afterFeedback: []
      },
      // userInfo: getUserInfo(),
      // 处理方式
      handleType: {
        0: "教育劝改",
        1: "立案",
        2: "无发现",
        3: "改派",
        4: "违停",
        5: "责令改正"
      },
      communicateTypeArr: {
        1: "电话沟通",
        2: "短信沟通",
        3: "当面沟通"
      }, // 沟通方式组
      cardList: [
        {
          value: "1",
          text: "身份证"
        },
        {
          value: "2",
          text: "台胞证"
        },
        {
          value: "3",
          text: "港澳身份证"
        }
      ],
      handleShow: false,
      feedbackShow: false,
      operate: "", // 操作
      moreEventList: [],
      audioArr: [], // 音频文件列表
      docList: [], // 出里文书列表
      canBack: true, // // 事件已经处理过后，流到执法队员这里不可进行退回操作
      eventStatus: null // 事件状态
    };
  },
  computed: {
    eventNode() {
      return this.$route.query.eventNode;
    },
    title() {
      switch (this.operate) {
        case "back":
          return "事件退回";
        case "deal":
          return "事件处理";
        case "feedback":
          return "事件反馈";
        default:
          return "事件详情";
      }
    },
    userInfo() {
      return JSON.parse(window.localStorage.getItem("user"));
    }
  },
  created() {
    this.feedBackStatus = this.$route.query.feedBackStatus
    this.eventSource = this.$route.query.eventSource
  },
  mounted() {
    this.height = this.eventNode
      ? document.body.clientHeight - 110
      : document.body.clientHeight - 40;
    this.getEventDetail();
    this.getHandleDetail();
    this.getFeedbackDetail();
    this.getMoreEvents();
  },
  methods: {
    showImgList(imgs, index) {
      // let imgs = arr.map(item=>{
      //   return item.image
      // })

      imgs.length &&
        this.$createImagePreview({
          imgs,
          "initial-index": index
        }).show();
    },
    handleDeal() { // 处理
      this.operate = "deal";
    },
    handleBack() { // 退回
      this.operate = "back";
    },
    handleFeedback() { // 反馈
      this.operate = "feedback";
    },
    handleDismiss() { // 不予受理
      this.operate = "dismiss";
    },
    handleChangePage() {
      if (this.operate == "") {
        this.$router.back();
      } else {
        this.operate = "";
      }
    },
    async getEventDetail() {
      let { data } = await findOne({
        eventId: this.$route.query.id,
        userId: this.userInfo.userId
      });
      this.eventStatus = data.eventStatus
      this.baseInfo = [
        { name: "事件编号", info: data.eventNumber },
        { name: "事件时间", info: data.eventTime },
        { name: "事件描述", info: data.eventDesc },
        { name: "事件地址", info: data.eventAddress },
        { name: "事件来源", info: data.eventSourceName },
        {
          name: "紧急上报",
          info: ["特急", "紧急", "一般"][data.eventLevel - 1]
        },
        { name: "事件备注", info: data.eventRemark },
        { name: "事件大类", info: data.eventLargeType },
        { name: "事件小类", info: data.eventSmallType },
        { name: "所属区县", info: data.eventArea },
        { name: "所属街道", info: data.eventStreet },
        { name: "所属道路", info: data.eventRoad },
        { name: "定时巡查", info: data.regularPatrol ? "是" : "否" }
      ];
      this.baseData = data;
      let sliderList = data.url ? JSON.parse(data.url) : [];
      this.sliderList = sliderList.map(img => img.url);
      // if(!this.isFeedbackCompleted){
      //   let arr = data.reportImgUrls.split(';')
      //   arr.forEach(item => {
      //     this.sliderList.push({
      //       image: replaceImgUrl(item)
      //     })
      //   });
      // }else{
      this.handleImg.beforeHnadle = data.reportImgUrls
        ? data.reportImgUrls.split(";")
        : [];
      this.handleImg.afterFeedback = data.feedbackImgUrls
        ? data.feedbackImgUrls.split(";")
        : [];
      // }
    },
    async getHandleDetail() {
      this.canBack = true;
      let res = await findOneResult(this.$route.query.id);
      if (res.code == 0) {
        if (res.data) {
          this.canBack = false
          this.handleShow = true;
          let data = res.data;
          if (data.endTime) {
            let endTime = new Date(data.endTime).getTime();
            let handleTime = new Date(data.punishTime).getTime();
            if (endTime - handleTime < 0) {
              data.isTimeout = "是";
            } else {
              data.isTimeout = "否";
            }
          } else {
            data.isTimeout = "否";
          }

          this.eventResult = [
            {
              name: "处理方式",
              info:
                data.punishMethod !== null
                  ? this.handleType[data.punishMethod]
                  : ""
            },
            {
              name: "沟通方式",
              info: data.communicateType
                ? this.communicateTypeArr[data.communicateType]
                : ""
            },
            { name: "处理单位", info: data.undertakeDept },
            { name: "处理人", info: data.undertakeName },
            { name: "处理时间", info: data.punishTime },
            { name: "处理内容", info: data.punishRemark },
            { name: "处理超时", info: data.isTimeout },
            { name: "处理截止", info: data.endTime }
          ];
          if (data.punishMethod === 0 || data.punishMethod === 5) {
            let arr = [];
            if (data.litigantType == 1) {
              arr = [
                { name: "当事人", info: data.litigantName },
                {
                  name: "证件类型",
                  info: this.cardList.filter(
                    item => item.value == data.cardType
                  )[0].text
                },
                { name: "证件编号", info: data.litigantCode }
              ];
            } else {
              arr = [
                { name: "单位名称", info: data.litigantName },
                { name: "信用代码", info: data.litigantCode }
              ];
            }
            let eventResult = this.eventResult;
            this.eventResult = [...eventResult, ...arr];
          }
          if (data.punishMethod === 5) {
            if (data.processingDocument.includes("绑定")) {
              // 绑定的文书号
              let obj = {};
              obj = {
                name: "处理文书",
                info: data.processingDocument
              };
              this.eventResult.push(obj);
            } else {
              // 绑定的文书图片
              let docList = data.processingDocument
                ? JSON.parse(data.processingDocument)
                : [];
              this.docList = docList.map(img => img.url);
            }
            // 音频
            this.audioArr = JSON.parse(data.processingAudio);
          }
          let hendleImgList = data.enclosureUrl
            ? JSON.parse(data.enclosureUrl)
            : [];
          this.hendleImgList = hendleImgList.map(img => img.url);
        } else {
          this.handleShow = false;
        }
      } else {
        this.handleShow = false;
        this.$createToast({
          txt: "处理结果获取失败",
          type: "txt"
        }).show();
      }
    },
    async getFeedbackDetail() {
      let res = await findFeedBack(this.$route.query.id);
      if (res.code == 0) {
        if (res.data) {
          this.feedbackShow = true;
          let data = res.data;
          let eTime = new Date(data.endTime).getTime();
          let nTime = new Date(data.realEndTime).getTime();
          let outtime = parseInt((nTime - eTime) / 1000);
          if (outtime < 0) {
            data.isOuttime = "否";
          } else {
            data.isOuttime = "是";
          }
          this.feedbackInfo = [
            { name: "反馈单位", info: data.groupName },
            { name: "反馈人", info: data.userName },
            { name: "反馈时间", info: data.realEndTime },
            { name: "反馈内容", info: data.message },
            { name: "反馈超时", info: data.isOuttime },
            { name: "反馈截止", info: data.endTime }
          ];
          let feedbackImgList = data.url ? JSON.parse(data.url) : [];
          this.feedbackImgList = feedbackImgList.map(img => img.url);
        } else {
          this.feedbackShow = false;
        }
      } else {
        this.feedbackShow = false;
        this.$createToast({
          txt: "反馈详情获取失败",
          type: "txt"
        }).show();
      }
    },
    // 获取流转记录
    getMoreEvents() {
      moreEvents(this.$route.query.id).then(res => {
        if (res.code == 0) {
          this.moreEventList = res.data;
        }
      });
    },
    // 下载音频
    // async download(url, name) {
      
    // }
  },
  components: {
    "header-bar": () => import("@/components/header-bar/header-bar"),
    "text-detail": () => import("@/views/common-page/text-detail"),
    "handle-content": () => import("./handle-content"),
    "backEvent": () => import("./backEvent"),
    "feedback": () => import("./feedback"),
    "dismiss": () => import("./dismiss"),
    "more-events": () => import("@/views/task-info/moreEvents.vue")
  }
};
</script>

<style lang="stylus">
@import '../../assets/css/image.styl'
.task-has-handle{
  .info-content{
    margin-top: 10px;
  }
  .pl10 {
    padding 14px 10px
  }
  .slider-item{
    text-align center
    .slider-img{
      object-fit: contain;
      vertical-align: top;
      width: 100%;
      height 100%;
    }
  }
  .handle-btn{
    height:41px;
    background:rgba(4,48,102,1);
    border-radius:4px;
    text-align center;
    line-height 41px;
    font-size:15px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(255,255,255,1);
  }
  .slide-content{
    position: relative
    width: 100%
    height: 225px;
    background-color:#fff
    overflow: hidden
    margin-bottom 10px
    &.showContent{
      transform: translateY(0)
    }
  }
  .event-desc{
    margin-top 10px;
    width: 100%;
    height: 110px;
    background:rgba(255,255,255,1);
    p{
      height: 30px;
      display: flex;
      align-items flex-end;
      font-size:14px;
      font-family:PingFangSC-Regular;
      font-weight:400;
      color:rgba(51,51,51,1);
      text-indent: 12px;
    }
    .cube-textarea-wrapper{
      font-size:14px;
      font-family:PingFangSC-Regular;
      font-weight:400;
      color:rgba(153,153,153,1);
      max-height: 80px;
      .cube-textarea{
        font-size:14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(153,153,153,1);
        padding-left 15px;
      }
      &::after{
        border: none;
      }
    }
  }
  .btn-groups{
    position fixed
    bottom 0
    left 0
    z-index 99
    background-color #f5f5f5
    padding 12px 0
    width: 100%;
    height:41px;
    display: flex;
    justify-content: space-around;
    >.btn{
      width:calc(100% - 24px);
      height: 100%;
      background:rgba(4,48,102,1);
      border-radius:4px;
      text-align center;
      line-height 41px;
      font-size:15px;
      font-family:PingFangSC-Regular;
      font-weight:400;
      color:rgba(255,255,255,1);
      &.btn-deal {
        width: 46%;
      }
    }
  }
}
.doc-box {
  background-color #fff
  font-size 14px
  color #333
  .title {
    padding 0 0 6px 12px
  }
}
.audio-box {
  background-color #fff
  font-size 14px
  padding 12px
  color #333
  &-item {
    margin-top 12px
  }
  .download-btn {
    display inline-block
    padding 10px
    background rgba(4,48,102,1);
    color #fff
    margin-left 8px
    border-radius 4px
  }
  audio {
    vertical-align middle
    width 76%
  }
  .audio-info {
    margin 8px 0 0
    width 350px
    overflow hidden
    text-overflow ellipsis 
    white-space nowrap
    border-bottom 1px solid #ddd
    padding-bottom 10px
  }
}
</style>
